<template>
  <page-header-wrapper :title="false" content="题目类别">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form class="ant-advanced-search-form" labelAlign="right">
        <a-row :gutter="24">
          <!-- <a-col :span="6">
            <a-form-item label="ID">
              <a-input v-decorator="['orderNo']" style="width: 100%" placeholder="请输入ID" allowClear />
            </a-form-item>
          </a-col> -->
          <a-col :span="6">
            <a-form-item label="类别名称">
              <a-input v-model="queryParam.name" style="width: 100%" placeholder="请输入类型名称" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="6" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="handleSearch">
              查询
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="reset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
      <div class="content">
        <div class="table-header">
          <a-button type="primary" @click.stop="edit({}, 1)">新增</a-button>
        </div>
        <div>
          <a-table :columns="columns" :data-source="listData" bordered rowKey="id" :pagination="pagination"
            @change="handleTableChange" :loading="loading">
            <template slot="operation" slot-scope="text, record">
              <a ref="javascript:;" @click.stop="edit(record, 2)" style="color: #409eff">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除操作？该操作会删除该类别下的所有题目，请谨慎操作！" ok-text="确定" cancel-text="取消"
                @confirm="deleteItem(record)">
                <a ref="javascript:;" @click.stop="() => { }" style="color: #67c23a">删除</a>
              </a-popconfirm>
            </template>
          </a-table>
        </div>
      </div>
    </a-card>
    <edit @refresh="refresh" ref="edit" />
  </page-header-wrapper>
</template>

<script>
import Edit from "./edit.vue";
import { getTypeList, deleteType } from "@/api/questionType";
const columns = [
  // {
  //   title: "ID",
  //   dataIndex: "id",
  //   key: "id",
  // },
  {
    title: "类别名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 200,
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  components: {
    Edit,
  },
  data() {
    return {
      listData: [],
      columns,
      pagination: {},
      queryParam: {},
      loading: false,
    };
  },
  created() {
    this.getListData({ page: 1, page_size: 10 });
  },
  methods: {
    //编辑
    edit(record = {}, mode) {
      this.$refs.edit.showDrawer(record, mode);
    },
    //搜索
    handleSearch(e) {
      e.preventDefault();
      this.getListData({ page: 1, page_size: 10 });
    },
    handleTableChange(pagination) {
      this.pagination = {
        pageNum: pagination.current,
        pageSize: pagination.pageSize
      };
      this.getListData({
        page_size: pagination.pageSize,
        page: pagination.current,
      });
    },
    getListData(params = {}) {
      this.loading = true;
      getTypeList({
        ...params,
        ...this.queryParam,
      })
        .then((res) => {
          this.listData = res.data
          this.pagination = {
            total: res.total,
            pageNum: res.page,
            pageSize: res.page_size,
            showTotal: () => {
              return `共计${res.total}条`
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    reset() {
      this.queryParam = {}
    },
    refresh() {
      this.getListData({ page: this.pagination.pageNum, page_size: this.pagination.pageSize });
    },
    deleteItem(record) {
      deleteType(record.id).then(() => {
        this.$message.success('删除成功')
        if (this.listData.length === 1 && this.pagination.pageNum > 1) {
          this.pagination.pageNum -= 1
        }
        this.refresh()
      })
    },
  },
};
</script>
<style lang="less" scoped>
.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}

.content {
  margin: 12px;

  .table-header {
    margin-bottom: 12px;
  }
}
</style>
